/*
  学习目标：jsx插值表达式-基本数据类型
  语法: {表达式}
  基本数据类型: string number  null undefined boolean
  引用数据类型: 对象 数组 函数
  其它: 三元表达式, 逻辑且, JSX
  
   
*/

import React from 'react';
import ReactDOM from 'react-dom';

// 对象 数组 函数
const person = {
  name: 'zs',
  age: 18,
  type: 'div',
  child: {
    name: 'zs',
    age: 3,
  },
};

// 💥 插值表达式中的数组, 数组内的每项元素, 会被当做一个个dom节点渲染出来
const list = [1, <span>2</span>, <span>3</span>];
const ulNode2 = (
  <div>
    {/* 💥 插值符号中不能放对象, 否则直接报错 */}
    {/* <h1>{person}</h1> */}
    <h2>{person.name}</h2>

    <h3>{list}</h3>
    <h3>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </h3>
    <h3>123</h3>
  </div>
);

console.log('person  ----->  ', person);
console.log('ulNode2  ----->  ', ulNode2);

ReactDOM.render(ulNode2, document.getElementById('root'));
